<template>
  <div class="Cartlist">
    <div class="Cartitem" v-for="item in Cartlist" :key="item.id">
      <van-icon name="checked" />

      <img :src="item.image" class="img" />
      <div class="right">
        <div class="title">{{ item.storeName }}</div>
        <div class="mid">属性：{{ item.suk }}</div>
        <div class="bottom">
          <span class="pink">￥{{ item.price }}</span>
          <div class="number">
            <div
              class="minus"
              :disabled="isdisabled"
              @click="minus(item.id, item.cartNum)"
            >
              -
            </div>
            <div class="number_conter" ref="number">{{ item.cartNum }}</div>
            <div class="plus" @click="plus(item.id, item.cartNum)">+</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FxhDemoCartitem",
  data() {
    return {
      Cartlist: null,
      isdisabled: false,
      Totalprice: 0,
    };
  },
  inject: ["reload"],
  async created() {
    const {
      data: { data },
    } = await this.$request("get", "/fxh/cart/list", {
      page: 1,
      limit: 5,
      isValid: true,
    });
    this.Cartlist = data.list;
    this.CountTotal();
  },
  mounted() {},
  updated() {},
  methods: {
    CountTotal() {
      var a = 0;
      this.Cartlist.forEach((element) => {
        a = element.price * element.cartNum + a;
      });
      this.Totalprice = a * 100;
      this.$store.commit("setTotal", this.Totalprice);
      console.log(this.$store.state.Totalprice);
    },
    async minus(goodsid, num) {
      num = num - 1;
      if (num === 1) this.isdisabled = true;

      console.log(goodsid, num);
      const res = await this.$request("post", "/fxh/cart/num", {
        id: goodsid,
        number: num,
      });
      this.$nextTick(function () {
        this.CountTotal();
      });

      const {
        data: { data: data },
      } = await this.$request("get", "/fxh/cart/count", {
        numType: true,
        type: "sum",
      });
      this.$store.commit("setCount", data.count);
      this.$request("get", "/fxh/cart/list", {
        page: 1,
        limit: 5,
        isValid: true,
      }).then((res) => {
        console.log(res.data.data.list);
        this.Cartlist = res.data.data.list;
      });

      this.reload();
    },
    async plus(goodsid, num) {
      num = num + 1;
      console.log(goodsid, num);
      const res = await this.$request("post", "/fxh/cart/num", {
        id: goodsid,
        number: num,
      });
      const {
        data: { data: data },
      } = await this.$request("get", "/fxh/cart/count", {
        numType: true,
        type: "sum",
      });
     this.$nextTick(function () {
        this.CountTotal();
      });
      this.$store.commit("setCount", data.count);
      this.$request("get", "/fxh/cart/list", {
        page: 1,
        limit: 5,
        isValid: true,
      }).then((res) => {
        console.log(res.data.data.list);
        this.Cartlist = res.data.data.list;
      });

      this.reload();
    },
  },
};
</script>

<style lang="scss" scoped>
.Cartlist {
  width: 355px;
  margin-left: 15px;
  box-sizing: border-box;
  .Cartitem {
    @include flex;

    align-items: center;
    width: 355px;
    height: 101px;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    .van-icon {
      color: #ff448f;
      font-size: 18px;
    }
    .img {
      margin-left: 10px;
      width: 79px;
      height: 79px;
    }
    .right {
      @include cloumn;
      justify-content: space-around;
      width: 197px;
      margin-left: 10px;
      height: 69px;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 197px;
        font-size: 13px;
        color: #282828;
      }
      .mid {
        font-size: 11px;
        color: #999;
        margin-top: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 197px;
      }
      .bottom {
        @include between;
        width: 197px;
        margin-top: 10px;
        margin-left: 10px;
        .pink {
          font-size: 15px;
          font-weight: 600;
          color: #ff448f;
        }
        .number {
          @include flex;
          width: 96px;
          height: 23px;
          border-radius: 25px;
          .minus {
            width: 32px;
            height: 23px;
            border: 1px solid #a4a4a4;
            text-align: center;
            border-bottom-left-radius: 25px;
            border-top-left-radius: 25px;
          }
          .number_conter {
            text-align: center;
            width: 32px;
            height: 23px;
            line-height: 23px;
            border: 1px solid #a4a4a4;
          }
          .plus {
            width: 32px;
            height: 23px;
            border: 1px solid #a4a4a4;
            text-align: center;
            border-bottom-right-radius: 25px;
            border-top-right-radius: 25px;
          }
        }
      }
    }
  }
}
</style>
